<template>
    <div>
        <van-form>
            <slot name="global-config"></slot>
            <h2 class="form-group-label">
                图片列表
            </h2>
            <van-field name="uploader">
                <template #input>
                    <van-uploader :max-count="5"
                                  :max-size="3 * 1024 * 1024"
                                  :preview-full-image="false"
                                  multiple
                                  v-model="shadowImages"
                                  :before-read="beforeUpload"
                                  :after-read="upload"/>
                </template>
            </van-field>
            <Del :id="data.id"></Del>
        </van-form>
    </div>
</template>
<script>
    import * as qiniu from 'qiniu-js'
    import Draggable from 'vuedraggable'
    import Del from './../form/common/del'

    export default {
        components: {
            Draggable,
            Del
        },
        props: {
            data: Object
        },
        created(){
            this.shadowImages = this.data.images.map(function (image) {
                return {
                    url: image.url,
                }
            });
        },
        computed: {
            dragOptions() {
                return {
                    animation: 200,
                    group: "description",
                    disabled: false,
                    ghostClass: "ghost"
                };
            },
        },
        mounted() {

        },
        data() {
            return {
                drag: false,
                shadowImages : []
            }
        },
        watch:{
            shadowImages(){
                this.uploadFinished()
            }
        },
        methods: {
            // 返回布尔值
            beforeUpload(file) {
                if (file.type !== 'image/jpeg') {
                    this.$message.error('请上传 jpg 格式图片');
                    return false;
                }
                return true;
            },
            uploadFinished (){
                this.data.images = this.shadowImages.filter(function(file){
                    return file.url !== undefined
                }).map(function (file) {
                    return {
                        url: file.url,
                    }
                });
            },
            async upload(file) {
                const $this = this;
                file.status = 'uploading';
                file.message = '上传中...';
                const data = await this.$post('/api/upload/image-token', { file: file.file.name })
                file.url = data.dest
                let observable = qiniu.upload(file.file, data.key, data.token)
                let observer = {
                    error(err) {
                        if (err.code === 403) {
                            $this.$message.warning("该文件禁止上传")
                        } else {
                            $this.$message.warning(err.message)
                        }
                    },
                    complete(res) {
                        file.status = 'done';
                        file.message = '上传成功';
                        $this.uploadFinished()
                    }
                };
                observable.subscribe(observer) // 上传开始
            }
        }
    }
</script>